const app = Vue.createApp({
    data() {
        return {
            ballX: 300,
            ballY: 200,
            ballSpeedX: 2,
            ballSpeedY: -2,
            paddleX: 250,
            paddleWidth: 100,
            gameWidth: 600,
            gameHeight: 400,
        };
    },
    mounted() {
        this.startGame();
    },
    methods: {
        startGame() {
            setInterval(() => {
                this.updateBallPosition();
                this.checkCollision();
            }, 10);
        },
        updateBallPosition() {
            this.ballX += this.ballSpeedX;
            this.ballY += this.ballSpeedY;
        },
        checkCollision() {
            if (this.ballX < 0 || this.ballX > this.gameWidth - 20) {
                this.ballSpeedX = -this.ballSpeedX;
            }
            if (this.ballY < 0 || this.ballY > this.gameHeight - 20) {
                this.ballSpeedY = -this.ballSpeedY;
            }
            if (this.ballY + 20 >= this.gameHeight - 10 && this.ballX + 20 >= this.paddleX && this.ballX <= this.paddleX + this.paddleWidth) {
                this.ballSpeedY = -this.ballSpeedY;
            }
        },
    },
});

app.mount("#app");
